import React, { useState } from "react";
import style from "./style.module.scss"
import { MyNavBar } from "../../../components";
import { useNavigate } from "react-router-dom";
import { Slider, Toast } from 'react-vant';
import settingIconLightColorSun from "../../../assets/images/icon/common resource/hdpi/setting_icon_light_color_sun_n.png"
import settingIconDeepColorSun from "../../../assets/images/icon/common resource/hdpi/setting_icon_deep_color_sun_n.png"

const Index: React.FC = () => {

  const navigate = useNavigate()
  const [value, setValue] = useState(75);
  const onChangeAfter = (v) => Toast.info(`当前值：${v}`);

  return <div className={style.screenBrightness}>
    <MyNavBar title="屏幕亮度" onClickLeft={() => navigate("/set")} style={{ backgroundColor: "#fff" }}></MyNavBar>
    <div className={style.slider}>
      <img src={settingIconDeepColorSun} alt="" />
      <Slider value={value} onChange={setValue} onChangeAfter={onChangeAfter}
        buttonSize="16px"
        inactiveColor="#ddd"
        activeColor="#666"
      />
      <img src={settingIconLightColorSun} alt="" />
    </div>
  </div>;
};

export default Index;
